fix(ui): center AI-translate dual columns, consolidate MB-Web tokens, sync DESIGN.md fonts (0.8.3)#137
Conversation
… sync DESIGN.md fonts (0.8.3) The bilingual reader's root carries `markdown-body bilingual-cols`, so it inherited the single-column `max-width: 72ch` and crushed both columns to the left, leaving the pane's right half empty. `.bilingual-cols` now overrides the cap: it fills the reader pane (each column gets its own measure) and, past two measures on an ultra-wide pane, caps and centers. Guarded by a new bilingual.spec.ts e2e asserting the columns fill ≥95% of the pane. MB-Web kept a parallel light+dark literal palette that duplicated the workbench tokens value-for-value. Differently-named locals now alias the shared token (`--ac: var(--accent)`, `--border: var(--line)`, …), same-named ones inherit the global values, and the parallel dark block is gone — only the genuinely MB-specific literals (answer-blue, on-accent fg, AA-darkened faint, hover wash) remain. Off-scale "magic" radii snapped to the 4/6/7/8/999 scale (cards 8px; badge/chip/filter/toast/sync pills fully round); the note highlighter yellows became named --mb-mark / --mb-mark-staged tokens. Zero-visual-change for colors; verified in the browser across library, reader and notes in light + dark. DESIGN.md's typography frontmatter still named the pre-v0.8.0 families (Source Serif 4 / Inter Tight / JetBrains Mono) with swapped weights (display 500, label 600), contradicting the shipped IBM Plex superfamily and the §3 table — now corrected, along with a stray §3 "JetBrains Mono" mention and a ui-checklist item for the dual-column fill. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Warning Review limit reached
More reviews will be available in 51 minutes. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughVersion 0.8.3 fixes the bilingual dual-column reader layout by adding ChangesBilingual layout fix
MB-Web token consolidation
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f5212b6205
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| line length on an ultra-wide monitor. */ | ||
| .bilingual-cols { | ||
| position: relative; | ||
| max-width: calc(72ch * 2 + 40px); |
There was a problem hiding this comment.
When the viewport is below 1100px, the media query later in this file collapses .bi-pair to one column, but this new override still leaves the container capped at two reading measures instead of the original .markdown-body 72ch cap. On tablet/narrow desktop widths where the wiki layout is already single-column, bilingual source/translation paragraphs can now run nearly the full panel width while the normal reader remains capped, regressing the readability this cap was meant to protect. Add a narrow-mode override such as restoring max-width: 72ch for .bilingual-cols once the pairs stack.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Good catch — fixed in 95776e0. Below 1100px the pairs stack to a single column, so I restored max-width: 72ch for .bilingual-cols inside that stack media query; the two-measure cap now applies only to the side-by-side layout. Added a bilingual.spec.ts guard asserting the resolved max-width reverts to the single measure at a narrow viewport.
… (Codex P2) Below 1100px the bilingual pairs collapse to one stacked column, but the new `.bilingual-cols` two-measure cap left a stacked paragraph free to run the full panel width — wider than the mono reader's 72ch, regressing the readability the cap protects. Restore `max-width: 72ch` inside the existing stack media query. Guarded by a new bilingual.spec.ts test asserting the resolved max-width reverts to the single measure at a narrow viewport. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 participant
What & why
Third UI-polish round (
/impeccable critique→ polish → deliver). The critique put the main workbench at its polish ceiling; this round lands two real findings plus the design-system doc-sync the delivery loop requires.1. AI-translate dual columns no longer left-hug the pane (Fixed)
BilingualView's root carriesmarkdown-body bilingual-cols, so it inherited.markdown-body { max-width: 72ch }— the single-column reading measure — and crushed both columns into the left ~half, leaving the pane's right half empty..bilingual-colsnow overrides the cap: it fills the reader pane (each column gets its own measure) and, past two measures on an ultra-wide pane, caps at2×72ch + gapand centers.bilingual.spec.tsguard "dual-column view fills the reader pane…" — fails pre-fix (ratio ≈ 0.88), passes post-fix (≈ 1.0).colW/parentW = 1.0.2. MB-Web radii + colors consolidated onto the shared tokens (Changed — "彻底并轨")
src/mb/mb.csskept a parallel light+dark literal palette whose values already duplicated the workbench tokens value-for-value (verified each, both themes).--ac: var(--accent),--border: var(--line),--surface2: var(--surface-2), …).--bg/--surface/--text/--muted/--danger/--radius) inherit the global:root/dark values → the parallel dark block is deleted (only 5 MB-specific dark literals remain).999pxpill; the 4--radius-lg(12px) cards →--radius(8px) — back on the4/6/7/8/999scale.--mb-mark/--mb-mark-stagedtokens.--faint, hover wash.3. DESIGN.md typography frontmatter matched to the implementation (Fixed)
The machine-readable
typography:block still named the pre-v0.8.0 families (Source Serif 4 / Inter Tight / JetBrains Mono) and carried swapped weights (display 500, label 600), contradicting the shipped IBM Plex superfamily and the §3 prose table (display 600, label 500). Corrected, plus a stray §3 "JetBrains Mono" mention and the §3 MB-Web subsystem note.Verification
npm run verifygreen: lint · format:check · typecheck · coverage (901 unit, thresholds met) · build · e2e.graph.spec.ts:83Pixi flake + awiki.spec.ts:165Mermaid<style>strict-mode timing flake both pass on rerun/in isolation — neither is touched by this diff.)check:bundle: CSS 30.3 KB gzip / 35 (consolidation shrank CSS).🤖 Generated with Claude Code
Summary by CodeRabbit
Bug Fixes
Documentation
Tests